<template>
    <van-nav-bar :safe-area-inset-top="true"
        :left-arrow="isArrow"
        :border="border"
        :title="title"
        :fixed="fixed"
        class="p-t-6 p-b-6 navbar"
        style="--van-nav-bar-arrow-size:24px;--van-nav-bar-icon-color:#000;text-align: left;"
        :style="'--van-nav-bar-background-color:'+bgColor+
                ';--van-nav-bar-title-text-color:'+titleColor+
                ';--van-nav-bar-title-font-size:'+titleSize"
        @click-left="goBack"
    >
        <template #left v-if="left_title">
            <div :style="'font-size:'+left_titleSize+
                ';color:'+left_titleColor
            ">
                {{left_title}}
            </div>
        </template>
    </van-nav-bar>
    <div class="h-50" v-if="isFill"></div>
</template>
<script setup lang="ts">
    import { defineProps, toRefs } from "vue"
    const props = defineProps({
        //定义子组件需要接收的值
        fixed:{
            type:Boolean,
            default:false
        },
        isFill:{
            type:Boolean,
            default:false
        },
        isArrow: {
            type: Boolean,
            default: true
        },
        bgColor: {
            type: String,
            default: 'transparent'
        },
        left_title:{
            type:String,
            default:''
        },
        left_titleColor: {
            type: String,
            default: '#FFF'
        },
        left_titleSize: {
            type: String,
            default: '16px'
        },
        title:{
            type: String,
            default: ''
        },
        titleColor: {
            type: String,
            default: '#FFF'
        },
        titleSize: {
            type: String,
            default: '16px'
        },
        border: {
            type: Boolean,
            default: true
        }
    })
    const { left_title } = toRefs(props)
    const goBack = () => {
        left_title.value==''?history.back():''     
    };
    
</script>
<style lang="scss" scoped>
.navbar{
    line-height: 50px;
}
</style>